<template>
    <div class="shdxq">
        <el-button type="primary" @click="goToBack">返回</el-button>
        <!-- 订单基本信息 -->
        <el-card class="box-card">

            <a class="shu"></a> 订单基本信息:
            <div style="display: flex;  padding-top:2vh">
                <div style="flex: 1;">
                    订单状态:
                    <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.stateName }}</a>
                </div>

                <div style="flex: 1;">
                    <a style="margin-right: 10px;">订单类型：{{ orderDetail.typeName }}</a>
                </div>
                <div style="flex: 1;">
                    <a style="margin-right: 10px;">订单业务类型: {{ orderDetail.serviceName }}</a>
                </div>
                <div style="flex: 1;">
                    <a style="margin-right: 10px;">支付方式: {{ orderDetail.orderPayId == 1 ? "支付宝" : "其他" }}</a>
                </div>
            </div>

            <div style="display: flex;  padding-top:2vh">
                <div style="flex: 1;">
                    商品ID：
                    <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.itemId }}</a>
                </div>
                <div style="flex: 1;">
                    <a style="margin-right: 10px;">商品名称：{{ orderDetail.itemName }}</a>
                </div>

                <div style="flex: 1;">
                    <a style="margin-right: 10px;">数量：{{ orderDetail.buyNum }}</a>
                </div>

                <div style="flex: 1;">
                    <a style="margin-right: 10px;">商品一级分类：{{ orderDetail.oneTypeName }}</a>
                </div>
            </div>

            <div style="display: flex;  padding-top:2vh">
                <div style="flex: 1;">
                    商品二级分类：
                    <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.twoTypeName }}</a>
                </div>
                <div style="flex: 1;">
                    <a style="margin-right: 10px;">商品价格：{{ orderDetail.itemPrice }}</a>
                </div>

                <div style="flex: 1;">
                    <a style="margin-right: 10px;">支付状态：{{ orderDetail.orderPayId != 0 ? "已付款" : "未付款" }}</a>
                </div>

                <div style="flex: 1;">
                    <a style="margin-right: 10px;">用户ID：{{ orderDetail.userTelephone }}</a>
                </div>
            </div>

            <div style="display: flex;  padding-top:2vh">
                <div style="flex: 1;">
                    支付金额:
                    <a style="padding-left: 6px; margin-right: 10px;"> {{ orderDetail.payMoney }}</a>
                </div>
            </div>
        </el-card>

        <el-card class="box-card" v-show="orderDetail.orderTypeId == 2">
            <a class="shu"></a> 物流信息
            <div style="display: flex;  padding-top:2vh">
                <div style="flex: 1;">
                    物流公司名称:
                    <a style="padding-left: 6px; margin-right: 10px;"> {{ express.companyName }}</a>
                </div>

                <div style="flex: 1;">
                    <a style="margin-right: 10px;">物流单号：{{ express.expressCode }}</a>
                </div>

                <div style="flex: 1;">
                    <el-button type="primary" @click="openDialogVisible">查看物流详情</el-button>
                </div>
            </div>
        </el-card>

        <!-- <el-row>
            <el-col :span="4" :offset=18>商品总价：￥200</el-col>
            <el-col :span="4" :offset=18>运费：￥20</el-col>
            <el-col :span="4" :offset=18>红包抵扣：-￥2</el-col>
            <el-col :span="4" :offset=18>实付款：￥216</el-col>
        </el-row> -->

        <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
            <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap" :scroll-wheel-zoom="true"
                @click="handleClick" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom"
                NavigationControlType="BMAP_NAVIGATION_CONTROL_LARGE">
                <!-- 驾车路线规划 -->
                <bm-driving :start="express.startLocation" :end="express.endLocation" :auto-viewport="true"
                    policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE" :panel="false" location="南京" :waypoints="[]"
                    @searchcomplete="handleSearchComplete">
                </bm-driving>
                <bm-marker :position="{ lng: this.lng, lat: this.lat }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                </bm-marker>
            </baidu-map>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialogVisible">取 消</el-button>
                <el-button type="primary" @click="closeDialogVisible">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
export default {

    name: 'ScProjectMap',
    data() {
        return {
            // 途经点数组
            waypoint: [],
            // 轨迹数组
            path: [],

            // 地图中心点，可以用名字，也可以用Point：{ lng: 0, lat: 0 }，描述地图上点的经纬度
            // center: '南京',
            center: { lng: 0, lat: 0 },
            // 地图缩放级别
            zoom: 0,
            // 地图标点
            markers: [],

            // 弹出框显示
            dialogVisible: false,
            // 子订单id
            orderNum: "",
            orderDetail: {

            },
            // 物流
            express: {
                companyName: "",
                expressCode: "",
                startLocation: "",
                endLocation: "",
            },
            lng: null,
            lat: null

        }
    },

    methods: {

        // 鼠标点击触发
        handleClick(e) {
        },

        // 关闭路书移动
        reset() {
            this.play = false
        },

        // 同步中心点和缩放级别
        syncCenterAndZoom(e) {
            const { lng, lat } = e.target.getCenter()
            this.center.lng = lng
            this.center.lat = lat
            this.zoom = e.target.getZoom()
        },

        getPayName(id) {
            switch (id) {
                case 0:
                    return "银联"
                case 1:
                    return "支付宝"
                case 2:
                    return "微信"
                default:
                    return "未知"
            }
        },
        getOrderStatus(orderStatus) {
            switch (orderStatus) {
                case 0:
                    return "未知"
                case 1:
                    return "待付款"
                case 2:
                    return "待收货"
                case 3:
                    return "交易完成"
                case 4:
                    return "交易成功"
                default:
                    return "交易取消"
            }
        },

        queryChildDetail(childId) {
            this.$axios.get("/api/staffOrder/queryPageDetail/" + childId).then(response => {
                let resp = response.data;
                if (resp.code == 200) {
                    this.orderDetail = resp.data.orderDetailDto
                    if (this.orderDetail.orderTypeId == 2 && this.orderDetail.status == 109) {
                        // 查询物流信息
                        this.queryOrderExpress(this.orderNum);
                    }
                }
            })
        },

        // 查询物流信息
        queryOrderExpress(orderNum) {
            this.$axios.get("/api/staffOrder/queryExpress/" + orderNum).then(response => {
                let resp = response.data
                if (resp.code == 200) {
                    this.express = resp.data;
                }
            })
        },

        // 获取当前位置
        getCurrentPoint() {
            this.$axios.get("/api/staffOrder/getExpressPoint/" + this.express.expressCode).then(response => {
                let resp = response.data
                if (resp.code == 200) {
                    this.lng = resp.data[0];
                    this.lat = resp.data[1];
                }
            })
        },

        // 打开弹窗，定时器1秒更新1次当前位置
        openDialogVisible() {
            this.dialogVisible = true;

            // 延迟1秒后执行
            setTimeout(() => {
                this.timer = setInterval(() => {
                    this.getCurrentPoint();
                    console.log(this.lng, this.lat);
                }, 500);
            }, 1000);
        },

        closeDialogVisible() {
            this.dialogVisible = false
            // 清除定时器
            clearInterval(this.timer);
        },

        // 初始化地图
        initMap({ BMap, map }) {
            this.center.lng = 121.487899486
            this.center.lat = 31.24916171
            this.zoom = 15
            // 添加点
            let myGeo = new BMap.Geocoder();
            // 将地址解析结果显示在地图上，并调整地图视野    
            myGeo.getPoint("南京市江宁区蜗牛学苑南京校区", function (point) {
                if (point) {
                    map.addOverlay(new BMap.Marker(point));
                }
            });
        },

        // 路线搜索完成 res: 搜索结果
        handleSearchComplete(res) {
            this.path = res.getPlan(0).getRoute(0).getPath()
            this.addPoint();
        },

        // 添加路线经纬度数组
        addPoint() {
            let addParam = {};
            addParam.pointList = this.path;
            addParam.orderNum = this.orderNum;
            addParam.expressCode = this.express.expressCode;
            this.$axios.post("/api/staffOrder/addExpressPoint", addParam).then(response => {
                if (response.data.code != 200) {
                    this.$message.error(response.data.data);
                }
            })
        },

        goToBack() {
            this.$router.go(-1)
        },
    },
    created() {
        this.orderNum = this.$route.query.orderNum
        // 根据订单id查子菜单
        this.queryChildDetail(this.orderNum);
    },
    mounted() { }
}
</script>
  
<style scoped>
.bm-view {
    display: flex;
    order: 1;
    width: 100%;
    height: 500px;
}
</style>